<template>
  <div class="card-layout">
    <div v-for="(game, index) in games" :key="index" class="card">
      <img :src="game.imageUrl" class="card-image">
      <div class="card-content">
        <h4>{{ game.title }}</h4>
        <p>{{ game.description }}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

interface game {
  title: string;
  description: string;
  imageUrl: string;
}

export default defineComponent({
  name: 'YouTubeCardLayout',
  setup() {
    const games = ref<game[]>([
      {
        title: 'game Title 1',
        description: 'Description for game 1',
        imageUrl: 'path/to/image1.jpg'
      },
      {
        title: 'game Title 2',
        description: 'Description for game 2',
        imageUrl: 'path/to/image2.jpg'
      },
      {
        title: 'game Title 1',
        description: 'Description for game 1',
        imageUrl: 'path/to/image1.jpg'
      },
      {
        title: 'game Title 2',
        description: 'Description for game 2',
        imageUrl: 'path/to/image2.jpg'
      },
      {
        title: 'game Title 1',
        description: 'Description for game 1',
        imageUrl: 'path/to/image1.jpg'
      },
      {
        title: 'game Title 2',
        description: 'Description for game 2',
        imageUrl: 'path/to/image2.jpg'
      },
      // Add more game objects as needed
    ]);

    return {
      games
    };
  }
});
</script>

<style scoped>
.card-layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.card {
  width: 300px;
  margin: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px 4px 0 0;
}

.card-content {
  padding: 10px;
}
</style>
